<template>
  <el-table
    :data="menuList"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    :expand-row-keys="['1']"
    border
    highlight-current-row
  >
    <!-- default-expand-all -->
    <el-table-column width="100" label="序号" />
    <el-table-column label="Id" width="80" prop="id" />
    <el-table-column label="名称" prop="name" />
    <el-table-column label="权限值" prop="code" />
    <el-table-column label="操作">
      <template v-slot="{ row }">
        <el-button
          type="default"
          size="default"
          :disabled="row.level === 4"
          @click="addMenu(row.id)"
          >添加菜单</el-button
        >
        <el-button
          type="primary"
          size="default"
          :disabled="row.level === 1"
          @click="updateMenu(row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加修改对话框 -->
  <el-dialog v-model="dialogFormVisible" title="新增" width="30%" center>
    <el-form-item label="名称">
      <el-input
        v-model="menuInfo.name"
        placeholder="请输入"
        clearable
        :style="{ width: '300px' }"
      ></el-input>
    </el-form-item>
    <el-form-item label="权限值">
      <el-input
        v-model="menuInfo.code"
        placeholder="请输入"
        clearable
        :style="{ width: '300px' }"
      ></el-input>
    </el-form-item>

    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button type="primary" @click="seavMenu"> 确定 </el-button>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Menu",
});
</script>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqGetMenuList, reqAddMenuInfo, reqUpdateMenuInfo } from "@/api/menu";
import { MenuAddDataType } from "@/api/menu/types";
import { ElMessage } from "element-plus";

const menuList = ref<any>([]);

/**
 * 封装获取菜单列表函数
 */
const getMenuList = async () => {
  const res = await reqGetMenuList();
  menuList.value = res;
};
onMounted(() => {
  getMenuList();
});

// 初始化对话框数据
const dialogFormVisible = ref(false);
const menuInfo = ref<MenuAddDataType>({
  id: null,
  name: "",
  code: "",
  pid: null,
});

// 点击添加菜单
const addMenu = (id: number) => {
  menuInfo.value = {
    id: null,
    name: "",
    code: "",
    pid: null,
  };
  dialogFormVisible.value = true;
  menuInfo.value.pid = id;
};
// 点击修改菜单
const updateMenu = (row: MenuAddDataType) => {
  menuInfo.value = {
    id: null,
    name: "",
    code: "",
    pid: null,
  };
  dialogFormVisible.value = true;
  menuInfo.value = row;
};
// 点击确认
const seavMenu = async () => {
  if (!menuInfo.value.name && !menuInfo.value.code) {
    ElMessage.error("数据不可为空");
    return;
  } else {
    if (menuInfo.value.id) {
      // 修改
      try {
        await reqUpdateMenuInfo(menuInfo.value);
        ElMessage.success("修改成功");
        dialogFormVisible.value = false;
        getMenuList();
      } catch (error: any) {
        ElMessage.error("修改失败:" + error.message);
      }
    } else {
      // 添加
      try {
        await reqAddMenuInfo(menuInfo.value);
        ElMessage.success("添加成功");
        dialogFormVisible.value = false;

        getMenuList();
      } catch (error: any) {
        ElMessage.error("添加失败:" + error.message);
      }
    }
  }
};
</script>

<style scoped></style>
